<template>
  <p>{{ activeCount }}</p>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

const props = defineProps({
  count: Number
})

const activeCount = ref(0)

const duration = 10

watch(() => props.count, val => {
  if (val) {
    const step = Math.ceil(val / duration)
    const countTimer = setInterval(() => {
      activeCount.value += step
      if (activeCount.value >= val) {
        activeCount.value = val
        clearInterval(countTimer)
      }
    }, 60)
  }
}, { immediate: true })
</script>

<style lang="scss" scoped></style>
